import React,{useState, useEffect} from 'react';
import { Card ,Space ,Col, Row ,Tabs,Tooltip } from 'antd';
import type { TabsProps } from 'antd';
import {
  InfoCircleOutlined,
  CaretUpOutlined,
  CaretDownOutlined
} from '@ant-design/icons';
const { Meta } = Card;
import BarChart from './barChart'
import AreaChart from './areaChart'
import BarHChart from './barChartH'
import styles from '../index.less'
import { AnalysisData, salesDataType } from '@/pages/Index/data';

const PreChart: React.FC = (props:AnalysisData) => {
  const salesData:salesDataType ={
    desc:props?.salesData?.desc,
    saleDay:props?.salesData?.saleDay,
    saleHB:props?.salesData?.saleHB,
    saleTB:props?.salesData?.saleTB,
    saleTotal:props?.salesData?.saleTotal,
    title:props?.salesData?.title,
  }
  const barProps={
    title:props?.visitData?.title,
    height:100,
    xAxisData: {label:null,text:null,tickLine:null,line:null,grid:null},
    yAxisData: {label:null,text:null,tickLine:null,line:null,grid:null},
    xField:{
      name:'x名称',
      value:'xValue'
    },
    yField:{
      name:'y名称',
      type:'yValue'
    },
    forceFit: true,
    maxColumnWidth:10,
    data: props?.visitData?.data
  }
  const areaProps ={
    title:props?.orderNumData?.title,
    height:100,
    xAxisData:{},
    yAxisData:{},
    xField:'timePeriod',
    yField:'value',
    forceFit:true,
    maxColumnWidth:10,
    data:props?.orderNumData?.data,
  }
  const barHProps = {
    title:props?.oprationData?.title,
    height:100,
    xAxisData: {},
    yAxisData:{},
    forceFit: true,
    maxColumnWidth:10,
    xField:'value', //value
    yField:'year', //year
    data:props?.oprationData?.data
  };
    return (
      <div className={styles.preChart}>
        <div className={styles.preCard}>
              <Card hoverable className={styles.cardCon}>
                    <div className={styles.cardHead}>
                      <div className={styles.cardHead_top}>
                        <span>{salesData.title}</span>
                        <Tooltip title={salesData.title}>
                          <InfoCircleOutlined />
                        </Tooltip>
                      </div>
                      <div className={styles.cardHead_center}>
                        <span>{salesData.saleTotal}$</span>
                        <p>
                          <span className={styles.mr20}>周同比 {salesData.saleTB}%
                            {salesData.saleTB >0 ? <CaretUpOutlined  className={styles.upColor}/> : <CaretDownOutlined className={styles.downColor}/>}
                          </span>
                          <span>日同比 {salesData.saleHB}%
                            {salesData.saleHB >0 ? <CaretUpOutlined  className={styles.upColor}/> : <CaretDownOutlined className={styles.downColor}/>}
                          </span>
                        </p>
                      </div>
                    </div>
                    <p className={styles.cardTitle}>{salesData.title}</p>
              </Card>
              <Card hoverable className={styles.cardCon}>
                    <div className={styles.cardHead}>
                    <div className={styles.cardHead_top}>
                        <span>{barProps.title}</span>
                        <Tooltip title={barProps.title}>
                          <InfoCircleOutlined />
                        </Tooltip>
                      </div>
                      <div className={styles.cardHead_center}>
                        <BarChart {...barProps}/>
                      </div>
                    </div>
                    <p className={styles.cardTitle}>标题</p>
              </Card>
              <Card hoverable className={styles.cardCon}>
                   <div className={styles.cardHead}>
                      <div className={styles.cardHead_top}>
                          <span>{areaProps.title}</span>
                          <Tooltip title={areaProps.title}>
                            <InfoCircleOutlined />
                          </Tooltip>
                        </div>
                        <div className={styles.cardHead_center}>
                          <AreaChart {...areaProps}/>
                        </div>
                      </div>
                    <p className={styles.cardTitle}>标题</p>
              </Card>
              <Card hoverable className={styles.cardCon}>
                    <div className={styles.cardHead}>
                      <div className={styles.cardHead_top}>
                        <span>{barHProps.title}</span>
                        <Tooltip title={barHProps.title}>
                          <InfoCircleOutlined />
                        </Tooltip>
                      </div>
                      <div className={styles.cardHead_center}>
                        <BarHChart {...barHProps}/>
                      </div>
                    </div>
                    <p className={styles.cardTitle}>标题</p>
              </Card>
        </div>
      </div>
    );
  };

export default PreChart;
